<template>
  <div class="container">
    <div class="analyze-main-content">
      <div class="ll-main-content-title">
        <div class="title-left">
          <img class="num-icon" src="../../../assets/imgs/analyze-num-icon.png" alt="">
          <span>号码统计</span>
        </div>
        <div class="title-right">
          <span class="query-area-input-outbox">统计
            <input v-model="queryNum" type="text" placeholder="30" class="query-area-input my_text_center">&nbsp;期</span>
          <button class="query-area-btn" @click="llQueryData">查询</button>
        </div>
      </div>
      <div class="analyze-number-table" v-if="this.$route.params.caizhongID !=11 && this.$route.params.caizhongID !=14 && this.$route.params.caizhongID !=10">
        <table>
          <thead>
            <tr class="thead-one-tr">
              <th rowspan="2" class="one-tr-one-th">号码</th>
              <th colspan="2">第一球</th>
              <th colspan="2">第二球</th>
              <th colspan="2">第三球</th>
              <th colspan="2">第四球</th>
              <th colspan="2">第五球</th>
            </tr>
            <tr class="thead-two-tr">
              <th>总开</th>
              <th>未开</th>
              <th>总开</th>
              <th>未开</th>
              <th>总开</th>
              <th>未开</th>
              <th>总开</th>
              <th>未开</th>
              <th>总开</th>
              <th>未开</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in tbodyListsVar" :key="index">
              <td v-for="(item,index) in item" :key="index">{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>

        <!-- 加判断 -->
      <div class="analyze-number-table" v-if="this.$route.params.caizhongID ==11 || this.$route.params.caizhongID ==14">
         <table>
          <thead>
            <tr class="thead-one-tr">
              <th rowspan="2" class="one-tr-one-th">号码</th>
              <th colspan="2">第一球</th>
              <th colspan="2">第二球</th>
              <th colspan="2">第三球</th>
            </tr>
            <tr class="thead-two-tr">
              <th>总开</th>
              <th>未开</th>
              <th>总开</th>
              <th>未开</th>
              <th>总开</th>
              <th>未开</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in tbodyListsVar" :key="index">
              <td v-for="(item,index) in item" :key="index">{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 北京 -->
      <div class="analyze-number-table bj-analyze-number-table" v-if="this.$route.params.caizhongID ==10">
        <table>
          <thead>
            <tr class="thead-one-tr">
              <th rowspan="2" class="one-tr-one-th bj-one-tr-one-th">号码</th>
              <th colspan="2" v-for="(item,index) in bj10List[0]">{{item.name}}</th>
            </tr>
            <tr class="thead-two-tr">
              <th class="bj-thead-two-tr-th" v-for="(item,index) in bj10List[1]">{{item.status}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in tbodyListsVar" :key="index">
              <td>
                <span style="color:#270604" class="bj-analyze-number-table-tabletbody-trtd-span" v-bind:class="[index==0 ? 'stylebackground1' : index==1 ? 'stylebackground2':index==2 ? 'stylebackground3':index==3 ? 'stylebackground4':index==4 ? 'stylebackground5':index==5 ? 'stylebackground6':index==6 ? 'stylebackground7':index==7 ? 'stylebackground8':index==8 ? 'stylebackground9':index==9 ? 'stylebackground10':'']">{{index+1}}</span>
              </td>
              <td v-for="(item,index) in item" :key="index">
                {{item}} 
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryNum: 30,
      tbodyListsVar: {},
      theadTypeListsVar: [],
      bj10List:[
        [
          {
            name:"冠军"
          },
          {
            name:"亚军"
          },
          {
            name:"第三名"
          },
          {
            name:"第四名"
          },
          {
            name:"第五名"
          },
          {
            name:"第六名"
          },
          {
            name:"第七名"
          },
          {
            name:"第八名"
          },
          {
            name:"第九名"
          },
          {
            name:"第十名"
          },
        ],[
          {
            status:"总开"
          },
          {
            status:"未开"
          },
          {
            status:"总开"
          },
          {
            status:"未开"
          },
          {
            status:"总开"
          },
          {
            status:"未开"
          },
          {
            status:"总开"
          },
          {
            status:"未开"
          },
          {
            status:"总开"
          },
          {
            status:"未开"
          },
          {
            status:"总开"
          },
          {
            status:"未开"
          },
          {
            status:"总开"
          },
          {
            status:"未开"
          },
          {
            status:"总开"
          },
          {
            status:"未开"
          },
          {
            status:"总开"
          },
          {
            status:"未开"
          },
          {
            status:"总开"
          },
          {
            status:"未开"
          },
        ]
      ]
    };
  },
  mounted() {
    this.axios
      .get("analyse/getObtainNumberStatisticsLimit", {
        params: {
          lottery_id: this.$route.params.caizhongID,
        }
      })
      .then(res => {
        if (res.data.status) {
          this.tbodyListsVar = res.data.data;
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
  },
  methods: {
    llQueryData() {
      if(this.queryNum>200){
        this.queryNum = 200;
      }
      this.axios
      .get("analyse/getObtainNumberStatisticsLimit", {
        params: {
          lottery_id: this.$route.params.caizhongID,
          limit: this.queryNum
        }
      })
      .then(res => {
        if (res.data.status) {
          this.tbodyListsVar = res.data.data;
        } else {
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.analyze-main-content .analyze-number-table table{
  width: 90%;
}
@import url(../../../assets/css/analyzenumber.less);
.analyze-main-content .analyze-number-table table thead .thead-one-tr .bj-one-tr-one-th{
  padding: 0 30px;
}
.analyze-main-content .analyze-number-table table thead .thead-two-tr th.bj-thead-two-tr-th{
  padding: 16px 10px 10px;
}
.bj-analyze-number-table-tabletbody-trtd-span{
  display: inline-block;
  width: 31px;
  height: 32px;
  border-radius: 6px;
  text-align: center;
  line-height: 32px;
  color:#fff;
}
.stylebackground1{
  background: #ffee31;
}
.stylebackground2{
  background: #5eb5ff;
}
.stylebackground3{
  background: #7c7c7c;
}
.stylebackground4{
  background: #ff8d2f;
}
.stylebackground5{
  background: #68eaf2;
}
.stylebackground6{
  background: #ffee31;
}
.stylebackground7{
  background: #d8d8d8;
}
.stylebackground8{
  background: #ff1818;
}
.stylebackground9{
  background: #8f3838;
}
.stylebackground10{
  background: #8be174;
}
</style>


